<template>
  <div>
    <!-- 表格和分页部分 -->
    <el-row class="mt-10">
      <el-col :span="24">
        <el-card>
          <el-row>
            <el-col :span="24">
              <!-- 新增按钮 -->
              <el-button type="success" @click="handleDialog">新增</el-button>
              <!-- 批量删除 -->
              <el-button type="danger">批量删除</el-button>
            </el-col>
          </el-row>
          <!-- 定义表格，data 绑定的是列表数据，border 表示有边框 -->
          <!-- selection-change 事件表示用户勾选的状态改变 -->
          <el-table :data="pageData.list" border class="mt-10">
            <!-- 定义表格列，type 表示列类型，selection 表示多选框 -->
            <el-table-column type="selection" width="55"></el-table-column>
            <!-- 定义表格列，prop 对应列内容的字段名， label 表示表头名称，width 可以控制度 -->
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="loginName" label="账号"></el-table-column>
            <el-table-column
              prop="userName"
              label="用户名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="enabled"
              label="是否可用"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="scope.row.enabled === 0">禁用</span>
                <span v-if="scope.row.enabled === 1">正常</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <!-- 自定义列模板，可以添加按钮 -->
              <template slot-scope="scope">
                <el-button size="mini" @click="handleDialog(scope)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 完整功能的分页 -->
          <!-- size-change 事件表示用户修改了每页显示的数量 -->
          <!-- current-change 事件表示用户改变了当前页码 -->
          <!-- page-sizes 数组表示可下拉选择的每页显示数量 -->
          <el-pagination
            class="mt-10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.currPageNo"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.totalCount"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加、修改对话框 -->
    <el-dialog
      :title="(dataForm.user.id == '' ? '新增' : '编辑') + '用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dataForm">
        <!--  如果是添加id不会赋值,调用后端接口默认为就是新增 -->
        <el-input
          type="hidden"
          v-model="dataForm.user.id"
          autocomplete="off"
        ></el-input>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.user.loginName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.user.userName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.user.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="dataForm.user.roleId" placeholder="请选择角色">
            <el-option label="主管" :value="1"></el-option>
            <el-option label="系统管理员" :value="2"></el-option>
            <el-option label="销售经理" :value="3"></el-option>
            <el-option label="产品经理" :value="4"></el-option>
            <el-option label="普通会员" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="dataForm.user.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.user.identityCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="dataForm.user.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input
            v-model="dataForm.user.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- <el-radio-group v-model="dataForm.user.enabled">
            <el-radio :label="0">正常</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group> -->
          <el-switch
            v-model="dataForm.user.enabled"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="doAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
export default {
  created() {
    //组件加载初始化
    this.getList();
  },
  methods: {
    //添加提交触发事件
    getList() {
      //得到表单数据
      let bodyData = qs.parse(qs.stringify(this.searchForm));
      this.$axios
        .post(
          "/uni/manager/user?pageSize=" +
            this.pageSize +
            "&currPageNo=" +
            this.currPageNo,
          bodyData
        )
        .then((res) => {
          this.pageData = res.data.result;
        });
    },

    //触发添加\修改事件
    handleDialog(scope) {
      this.cleanDateForm();
      this.dialogFormVisible = true;
      if (scope.row != undefined) {
        this.selectUserByIdForm.id = scope.row.id;
        let bodyDate = qs.parse(qs.stringify(this.selectUserByIdForm));
        this.$axios.post("/uni/manager/user", bodyDate).then((res) => {
          this.dataForm.user = res.data.result;
        });
      }
    },

    //添加提交触发事件
    doAdd() {
      if (this.dataForm.user.id == "") {
        this.dataForm.opr = "insert";
        let bodyData = qs.parse(qs.stringify(this.dataForm));
        this.$axios.post("/uni/manager/user", bodyData).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.dialogFormVisible = false;
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        this.dataForm.opr = "update";
        let bodyData = qs.parse(qs.stringify(this.dataForm));
        this.$axios.post("/uni/manager/user", bodyData).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.dialogFormVisible = false;
            this.getList();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },

    //根据id删除
    handleDelete(id) {
      this.dataForm.opr = "delete";
      this.dataForm.user.id = id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/uni/manager/user", this.dataForm).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.msg);
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //取消按钮
    handleCancel() {
      this.cleanDateForm();

      this.dialogFormVisible = false;
    },
    //清空表单数据
    cleanDateForm() {
      this.dataForm.user.id = "";
      this.dataForm.user.roleId = "";
      this.dataForm.user.loginName = "";
      this.dataForm.user.userName = "";
      this.dataForm.user.password = "";
      this.dataForm.user.sex = "";
      this.dataForm.user.identityCode = "";
      this.dataForm.user.email = "";
      this.dataForm.user.mobile = "";
      this.dataForm.user.enabled = "";
    },

    //每页显示几条
    handleSizeChange(pageSize) {
      //得到pageNo之后想办法调用分页的接口(分页接口参数应该是封装好的一个对象)
      this.pageSize = pageSize;
      this.getList();
    },

    //显示第几页的数据
    handleCurrentChange(currPageNo) {
      this.currPageNo = currPageNo;
      this.getList();
    },
  },

  data() {
    return {
      //当前页码
      currPageNo: 1,
      //每页显示几条记录
      pageSize: 6,
      // 根据接口信息定义好查询条件
      searchForm: {
        opr: "page",
      },
      selectUserByIdForm: {
        opr: "selectUserById",
        id: "",
      },
      // 根据后端返回数据定义表格和分页的数据
      pageData: {
        list: [],
        currPageNo: 1,
        pageSize: 5,
        totalCount: 0,
        totalPageCount: 1,
      },
      //定义添加\修改窗口是否显示变量
      dialogFormVisible: false,
      //input 宽度
      formLabelWidth: "120px",
      dataForm: {
        opr: "insert",
        user: {
          id: "",
          roleId: "",
          loginName: "",
          userName: "",
          password: "",
          sex: "",
          identityCode: "",
          email: "",
          mobile: "",
          enabled: "",
          create_time: "",
          update_time: "",
        },
      },
    };
  },
};
</script>
<style>
.mt-10 {
  margin-top: 10px;
}

.el-tooltip__popper {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
